<template>
  <view class="topic-box">
    <view class="topic-img">
      <template v-if="!topPicImg">
        <image
          class="topic-line-one"
          v-if="lineNum == 1"
          :src="asyncImgs.diyNew.topic_line_one"
          mode="aspectFill"
        />
        <image
          class="topic-line-two"
          v-else
          lazy-load
          :src="asyncImgs.diyNew.topic_line_two"
          mode="aspectFill"
        />
      </template>
      <image
        v-else
        class="topic-line-one"
        lazy-load
        :src="topPicImg"
        mode="widthFix"
      />
    </view>
    <view class="topic-list" :class="styleType == 1 ? 'media-width' : ''">
      <view
        class="topic-item"
        v-for="(item, index) in topicNoTabList"
        @click="topicSkip(item.id)"
        :key="index"
      >
        <view class="topic-title">{{ item.title }}</view>
        <view class="topic-more" @click.stop="$utils.toUrl('/other/special/special')">
          <view class="split-line"></view>
          <view class="more">{{ $t("common.more") }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    topicNoTabList: {
      type: Array,
      default: [],
    },
  },

  computed: {
    styleType() {
      return this.propsData.params.styleType;
    },
    topPicImg() {
      return this.propsData.params.topPicImg;
    },
    lineNum() {
      return this.propsData.params.lineNum;
    },
  },
  methods: {
    topicSkip(e) {
      uni.navigateTo({
        url: "/other/special/topic?id=" + e,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.topic-box {
  width: 100%;
  padding: 3.2vw;
  display: flex;
  align-items: center;
  .topic-img {
    .topic-line-one {
      width: 20.26vw;
      height: 5.34vw;
      margin-right: 1.6vw;
    }
    .topic-line-two {
      width: 10.67vw;
      height: 9.968vw;
      margin-right: 1.6vw;
    }
    image {
      display: block;
    }
  }
  .topic-list {
    width: 81.33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .topic-item {
      display: flex;
      align-items: center;
      .topic-title {
        flex: 1;
        font-size: 3.73vw;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .topic-more {
        width: 14.4vw;
        display: flex;
        align-items: center;
        .split-line {
          width: 1px;
          height: 4.267vw;
          background-color: #ebebeb;
          margin: 0 2.93vw 0 1.6vw;
        }
        .more {
          font-size: 3.73vw;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
        }
      }
    }
  }
  .media-width {
    width: 71.73%;
  }
}
</style>
